<template>
    <div style="max-width: 450px; margin: 0 auto;">
        <div style="background-color: #008CA0; height: 3.5rem;">
            <van-search
                v-model="search"
                shape="round"
                background="#008CA0"
                placeholder="请输入搜索关键词"
                @search="searchResult"
            />
        </div>
        <div>
            <van-nav-bar
            title="搜索结果"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>

        <el-table :data="productData" style="width: 100%;padding: 1rem;">
            <el-table-column type="index"/>
            <el-table-column prop="title" label="产品名称" width="240" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button link type="primary" size="small"
                        @click="() => router.push({ path: '/m/productDetail',  query: {'id': scope.row.id} })">
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>


<script setup>
import { watch, ref } from 'vue';
import { btyStore } from '@/stores/bty';
import { useRouter, useRoute } from 'vue-router';
import { getSearch } from '@/requests/index';
const route = useRoute();
const searchContent = ref(route.query.content);
const newsCount = ref(0);
const newsData = ref()
const productCount = ref(0);
const productData = ref()
const router = useRouter();
const showProduct = ref(true);
const search = ref();
const initStore = btyStore();


const getSearchResult = async()=>{
    const res = await getSearch({"search": searchContent.value});
    if (res.status){
        productCount.value = res.products.count;
        productData.value = res.products.data;
    }else{
        console.log("查询失败");
    };
    showProduct.value = true;
}

getSearchResult();
const searchResult = async() => {
    console.log(search.value)
    searchContent.value = search.value;
    getSearchResult();
};

const onClickLeft = () => history.back();
</script>